<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="400px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.font = /*border 加粗、lighter 变细，也可以直接填写数值来决定粗细，在大小前加*/"20px Arial";/*Arial是字体*/
	context.fillText("hello world",20,40)

	var g = context.createLinearGradient(0,0,250,0);
	g.addColorStop(0,"red");
	g.addColorStop(0.5,"green");
	g.addColorStop(1,"blue");
	context./*fill*/strokeStyle = g;/*stroke是边框 fill是填充*/
	context.font = "200 50px Times New Roman";
	// 如果很长的话需要设置一个变量
	// 变量样式：
	var str = "桑威威是我的儿子"
	context.textAlign = "start"
	context.textBaseline = /*"bottom"*/"top"/*线的位置*/
	context.strokeText(str,20,100);
	// context.fillText("Hello World",20,100);
	context.moveTo(0,100);
	context.lineTo(400,100);/*线的写法*/
	context.stroke()
</script>